
<template>
  <div class="app-container goTop">

      <div class="headbtn_box">
          <div class="addbutton">
              <el-button type="danger"  size="small"  @click="editHandler"  v-if="!isEditable && isMerchandiser" > 编辑</el-button>
              <el-button type="success"  size="small" @click="cancelHandler"  v-if="isEditable" > 取消</el-button>
              <el-button type="primary"  size="small" @click="saveHandler"  v-if="isEditable" > 保存</el-button>
          </div>
      </div>


       <!-- 修改登录密码 -->
         <el-form v-if="!isEditable" ref="adaPwdRef" :model="pwdForm"  :label-position="labelPosition"  label-width="100px" label-position="left" size="small">
             <el-card class="box-card" shadow="never">
               <el-form-item label="密码修改" class="box_tit">
                 <el-tooltip effect="dark" content="此账号为门店管理员登录时的账号密码，请妥善保管。" placement="bottom">
                    <el-icon>
                        <QuestionFilled/>
                     </el-icon>
                 </el-tooltip>
               </el-form-item>

               <el-row>
                 <el-col :span="8"  :offset="8">
                   <el-form-item label="新密码:"  prop="newPwd" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                       <el-input type="password" v-model="pwdForm.newPwd" placeholder="请输入密码" />
                   </el-form-item>
                   <el-form-item label="确认密码:"  prop="rePwd"  :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                       <el-input  type="password" v-model="pwdForm.rePwd" placeholder="请输入再次输入密码" />
                   </el-form-item>

                   <el-form-item    >
                       <el-button type="primary" @click="handlerUpdatePassword" >修改登录密码</el-button>
                   </el-form-item>

                 </el-col>

               </el-row>
             </el-card>
           </el-form>

           <div style="margin-top: 10px;"></div>

       <!-- 商家详情 -->

        <div class="mt15" >
         <el-card class="box-card" shadow="never">


            <!-- 查看详情信息层 -->
            <div class="views" v-if="!isEditable">
             <el-form ref="viewForm" :model="viewForm"  :label-position="labelPosition"  label-width="100px"   size="small">
              <el-form-item label="商家信息" class="box_tit">
              </el-form-item>
              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="登录账户:">
                    {{ viewForm.loginName }}
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="商家名称:">
                    {{ viewForm.name }}
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="联系电话:">
                    {{ viewForm.phone }}
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="审核状态:">
                      <template  v-for="item in dicts.sys_audit_status" >
                        <el-tag  effect="dark" :type="item.listClass"  v-if="item.dictValue==viewForm.status" >{{ item.dictLabel}}</el-tag>
                      </template>

                    </el-form-item>
                  </el-col>

                <el-col :span="16">
                  <el-form-item label="联系地址:">
                    {{ viewForm.address }}
                  </el-form-item>
                </el-col>
              </el-row>



              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="商家图片:">
                    <el-image   :src="viewForm.picture" :preview-src-list="[viewForm.picture]"  style="width:200px;height: 150px"></el-image>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="身份证正面:">
                    <el-image   :src="viewForm.idcardFrontUrl" :preview-src-list="[viewForm.idcardFrontUrl]"  style="width:200px;height: 150px"></el-image>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="身份证背面:">
                    <el-image   :src="viewForm.idcardBackUrl" :preview-src-list="[viewForm.idcardBackUrl]"  style="width:200px;height: 150px"></el-image>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="营业执照:">
                    <el-image   :src="viewForm.bussinessLicenseUrl" :preview-src-list="[viewForm.bussinessLicenseUrl]"  style="width:200px;height: 150px"></el-image>
                  </el-form-item>
                </el-col>

              </el-row>


              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="地图位置:">
                    <display v-if="viewForm.latitude" :item="viewForm"></display>
                  </el-form-item>
                </el-col>
              </el-row>

              </el-form>
            </div>


              <!-- 编辑信息层 -->
             <div class="edits" v-if="isEditable">
               <el-form ref="form"  :model="form"  :label-position="labelPosition"  label-width="100px"   size="small">
                 <el-form-item label="编辑商家信息" label-width="200px"   class="box_tit">
                 </el-form-item>

                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="商家名称:" >
                          {{ form.name }}
                      </el-form-item>

                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="联系电话" key="phone" prop="phone" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                        <el-input v-model="form.phone" placeholder="联系电话" />
                      </el-form-item>

                    </el-col>
                    <el-col :span="8">

                      <el-form-item label="配送半径" key="radius" prop="radius" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                        <el-input v-model.number="form.radius" placeholder="配送半径" />
                      </el-form-item>
                    </el-col>
                  </el-row>



               <el-form-item label="地图位置" key="longitude" prop="longitude" style="text-align:left;" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">

                 <search  :item="form" @myclick="mapAddressCallback"></search>

                 <div style="display:none;">
                   <el-input v-model="form.longitude" />
                 </div>
               </el-form-item>

               <el-row>
                 <el-col :span="12">
                   <el-form-item label="商家图片" key="picture" prop="picture" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-upload
                        class="avatar-uploader"
                        :action="publicImageUploadUrl"
                        :headers="tokenHeader"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="form.picture" width="350" :src="form.picture" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>

                      <div style="display:none;">
                         <el-input   v-model="form.picture"  />
                       </div>
                    </el-form-item>
                 </el-col>

                 <el-col :span="12">
                   <el-form-item label="营业执照" key="bussinessLicense" prop="bussinessLicense" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-upload
                        class="avatar-uploader"
                        :action="privateImageUploadUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess4"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="bussinessLicenseBlob" width="350" :src="bussinessLicenseBlob" class="avatar">
                        <img v-else-if="form.bussinessLicenseUrl" width="350" :src="form.bussinessLicenseUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>

                      <div style="display:none;">
                         <el-input   v-model="form.bussinessLicense"  />
                       </div>
                    </el-form-item>
                 </el-col>

               </el-row>


               <el-row>

                 <el-col :span="12">
                   <el-form-item label="身份正面" key="idcardFront" prop="idcardFront" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                       <el-upload
                         class="avatar-uploader"
                         :action="privateImageUploadUrl"
                         :show-file-list="false"
                         :on-success="handleAvatarSuccess2"
                         :before-upload="beforeAvatarUpload">
                         <img v-if="idcardFrontBlob" width="350" :src="idcardFrontBlob" class="avatar">
                         <img v-else-if="form.idcardFrontUrl" width="350" :src="form.idcardFrontUrl" class="avatar">
                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                       </el-upload>

                       <div style="display:none;">
                          <el-input   v-model="form.idcardFront"  />
                        </div>
                     </el-form-item>

                 </el-col>

                 <el-col :span="12">
                   <el-form-item label="身份背面" key="idcardBack" prop="idcardBack" :rules="[{ required: true, message: '该值不能为空', trigger: 'blur' }]">
                      <el-upload
                        class="avatar-uploader"
                        :action="privateImageUploadUrl"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess3"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="idcardBackBlob" width="350" :src="idcardBackBlob" class="avatar">
                        <img v-else-if="form.idcardBackUrl" width="350" :src="form.idcardBackUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>

                      <div style="display:none;">
                         <el-input   v-model="form.idcardBack"  />
                       </div>
                    </el-form-item>
                 </el-col>

               </el-row>


              </el-form>
             </div>

         </el-card>

       </div>


       <el-backtop target=".goTop"></el-backtop>


  </div>
</template>

<script>
  import {dataDictTypes } from '@/api/dictdata.js'
  import {changePasswordApi,  findByIdApi, updateApi} from '@/api/merchandiser.js'
  import { getToken } from '@/utils/auth'
  import display from '@/components/BaiduMap/display.vue'
  import search from  '@/components/BaiduMap/search.vue'

  export default {
    components: {
      display,
      search
    },
    // 计算属性(java中自定义get方法)
    computed: {
      //自定义方法（构造令牌）
      tokenHeader(){
        return {
          'Authorization' : 'Bearer '+ getToken()
        }
      }
    },
    data(){
      return {
        //本地回显示图片
        idcardFrontBlob: undefined,
        idcardBackBlob: undefined,
        bussinessLicenseBlob: undefined,
         publicImageUploadUrl: process.env.VUE_APP_BASE_API+'/anony/tencent/image/upload',
         privateImageUploadUrl: process.env.VUE_APP_BASE_API+'/anony/tencent/private/image/upload',
         labelPosition: 'right',
        //编辑状态
        isEditable: false,
        //更改密码表单
        pwdForm:{},
        //编辑商家表单
        form:{
          phone: undefined
        },
        //浏览商家信息表单
        viewForm: {

        },
        dicts: {}
      }
    },
    methods: {
      //是否是商家
      isMerchandiser(){
        return this.$store.user.accountType==='merchandiser'
      },
      //点击编译按钮的时候
      editHandler(){
         this.form={}
         this.isEditable=true

         //重置样式
         //this.$refs['form'].resetFields();
         //还原以前的值
         this.form = JSON.parse(JSON.stringify(this.viewForm))

      },
      //取消按钮
      cancelHandler(){
        this.isEditable=false
      },
      //保存按钮
      saveHandler(){
        //验证数据是否都有效了
        console.log( this.$refs)
         this.$refs['form'].validate((valid) => {
          console.log(valid)
          if (valid) {
             //验证成功
             this.$confirm('确定要保存数据吗?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
               }).then(() => {
                  //提交
                   this.saveForm();

               }).catch(() => {
                 //不提交操作
               });

          } else {
            return false;
          }
        });
      },
      saveForm(){
        updateApi(this.form).then(resp=> {
           this.isEditable =false
           this.$message({ message: '操作成功!', type: 'success' });
           this.fetchData()
        })
      },
      //查询数据字典的值
      fetchDictTypes() {
        const params= ['sys_audit_status']
        dataDictTypes(params).then(resp=> {
           this.dicts = resp.data
        })
      },
      //更改密码操作
     handlerUpdatePassword(){
          this.$refs["adaPwdRef"].validate(valid => {
            if (valid) {
              this.$confirm('确定要修改密码吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'danger'
                }).then(() => {
                   //提交
                   changePasswordApi(this.pwdForm).then(resp=> {
                     //更新密码成功，重新登录
                     this.$message({ message: '密码更新成功，重新登录!', type: 'success' });
                      this.$store.dispatch('user/logout').then(resp=> {
                        this.$router.push(`/login`)
                      })
                   })

                }).catch(() => {
                  //不提交操作
                });
           }
        })
      },
      // 图片上传成功以后返回的数据(json, file[blob]数据)  公共桶
       handleAvatarSuccess1(res, file) {
         this.form.picture=  res.data.image_url
       },
       //身份证正面
       handleAvatarSuccess2(res, file) {
         this.idcardFrontBlob=URL.createObjectURL(file.raw)
         this.form.idcardFront = res.data.file_name
         this.form.idcardFrontUuid = res.data.uuid
       },
       //身份证背面
       handleAvatarSuccess3(res, file) {
         this.idcardBackBlob=URL.createObjectURL(file.raw)
         this.form.idcardBack = res.data.file_name
         this.form.idcardBackUuid = res.data.uuid
       },
       //营业执照
       handleAvatarSuccess4(res, file) {
        this.bussinessLicenseBlob=URL.createObjectURL(file.raw)
        this.form.bussinessLicense = res.data.file_name
        this.form.bussinessLicenseUuid = res.data.uuid
       },
       // 图片上传之前验证
       beforeAvatarUpload(file) {
         const isJPG = file.type === 'image/jpeg' ||  file.type === 'image/png';
         const isLt1M = file.size / 1024 / 1024 < 1;

         if (!isJPG) {
           this.$message.error('上传图片只能是 JPG、PNG 格式!');
         }
         if (!isLt1M) {
           this.$message.error('上传头像图片大小不能超过 1MB!');
         }
         return isJPG && isLt1M;
       },
       //百度地图选择地址后的回调
       mapAddressCallback(data){
         console.log(data)
         this.form.address=data.address
         this.form.latitude =data.latitude
         this.form.longitude =data.longitude
       },
       //读取当前商家的信息
       fetchData(){
         findByIdApi().then(resp=> {
           this.viewForm= resp.data
           this.form = JSON.parse(JSON.stringify(resp.data))
         })

       }
    },
    created() {
      this.fetchDictTypes()
      this.fetchData()
    }
  }
</script>

<style scoped>
  .headbtn_box {
        position: relative;
        background-color: white;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        z-index: 1;
        min-width: 950px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05);

        .addbutton {
            right: 10px;
            button {
                margin: 0 8px;
            }
        }
    }


     .box_tit {
         font-size: 16px;
         font-weight: bold;
         color: #000000;

         .el-form-item__label {
             font-size: 16px !important;
             color: #000000 !important;
             text-align: left;
         }
     }

     .mt15{
       margin-top: 15px;
     }

     .el-form-item__label, el-form-item__content {
         font-size: 14px;
     }

  .goTop{
      height: 100vh;
      overflow-x: hidden;
    }

</style>
